<template>
  <div class="researchReport">
    <div class="researchCon">
      <div class="reportTitle">
        <span>研判报告</span>
        <img src="/images/button/close.png" alt @click="close" style="cursor: pointer;" />
      </div>
      <el-steps :active="active" finish-status="success">
        <!-- <el-step title="步骤 1"></el-step>
        <el-step title="步骤 2"></el-step>
        <el-step title="步骤 3"></el-step>-->
      </el-steps>
      <oneStep v-show="active===0" :taskListData="taskListData" @next="next" ref="oneStep"></oneStep>
      <twoStep v-show="active===1" ref="twoStep"></twoStep>
      <threeStep v-show="active===2" ref="threeStep"></threeStep>
    </div>
    <el-row class="reportButton">
      <div class="btn_style_class save_btn_position" v-show="active!=0" @click="save">
        <span>保存本地文件</span>
      </div>
      <!-- <div class="btn_style_class send_btn_position" v-show="active!=0"><span>生成报告并发送</span></div>
      <div class="btn_style_class dis_btn_position" v-show="active!=0"><span>预览</span></div>-->
    </el-row>
  </div>
</template>

<script>
import oneStep from "./oneStep";
import twoStep from "./twoStep";
import threeStep from "./threeStep";

export default {
  components: {
    oneStep,
    twoStep,
    threeStep
  },
  name: "researchReport",
  created() {
    this.$get("wuhao/urgent/all").then(res => {
      this.taskListData = res.data;
    });
  },
  data() {
    return {
      active: 1,
      taskListData: []
    };
  },
  methods: {
    next(step) {
      switch (this.active) {
        case 0:
          if (this.$refs.oneStep.taskSelection && this.$refs.oneStep.model) {
          } else {
            this.$message.warning({
              message: `请选择任务`,
              offset: 500
            });
            return;
          }
          break;
        case 1:
          if (!this.$refs.twoStep.title.name) {
            this.$message.warning({
              message: `请填写报告标题`,
              offset: 500
            });
            return;
          }
          break;
      }
      this.active += step;
      if (this.active < 0) this.active = 0;
      if (this.active > 2) this.active = 0;
    },
    save() {
      let data = {};
      data.title = this.title;
      data.sendUser = this.sendUser;
      data.data = this.date;
      data.briefing = this.dataProcessing(this.oneText, this.oneImg);
      data.disasterData = this.dataProcessing(this.twoText, this.twoImg);
      // data.disasteGeneral = this.dataProcessing(this.threeText, this.threeImg);
      // data.disasteResponse = this.dataProcessing(this.fourText, this.fourImg);
      // data.conclusion = this.dataProcessing(this.fiveText, this.fiveImg);
      this.expertGroup.forEach(i => {
        if (i.role == 1) {
          data.expertLeader = i.department;
          data.expertLeaderName = i.expertName;
        }
      });
      data.expertUser = this.expertGroup.filter(i => !i.role);
      console.log(data);
      const resultData = this.$post("wuhao/report/setdata", {
        data: data
      }).then(function(data) {
        if (data == "") {
          window.location.href = "http://10.0.49.2:8081/" + "/report/down";
        }
      });
    },
    wordProcessing(str) {
      let ary = [];
      //对图片进行特殊处理
      if (str.indexOf("<img") != -1) {
        let imgArr = str.split("<img");
        for (let i = 0; i < imgArr.length; i++) {
          if (imgArr[i].indexOf("<div") != -1) {
            let divArr = imgArr[i].split("<div");
            for (let j = 0; j < divArr.length; j++) {
              this.addArr(divArr[j], ary);
            }
          } else {
            this.addArr(imgArr[i], ary);
          }
        }
      } else {
        this.addArr(str, ary);
      }
      return ary;
    },
    addArr(str, ary) {
      let str2 = str.replace(/<span.+?>/g, "").replace(/<\/span>/g, "");
      let str3 = str2.replace(/src="(.+)">/, function(cur, lit) {
        return "\n" + lit;
      });
      let arrTwo = str3
        .replace(/<.+?>/g, "\n")
        .replace(/>/g, "")
        .split("\n");
      for (let a = 0; a < arrTwo.length; a++) {
        if (arrTwo[a]) {
          ary.push(arrTwo[a]);
        }
      }
    },
    dataProcessing(text, img) {
      let imgNum = 0;
      let ary = [];
      text.forEach(k => {
        let obj = {};
        // let pmgType=[".bmp",".jpg",".jpeg",".png",".gif"];
        if (
          /^http/.test(k) &&
          (k.indexOf(".bmp") != -1 ||
            k.indexOf(".jpg") != -1 ||
            k.indexOf(".jpeg") != -1 ||
            k.indexOf(".png") != -1 ||
            k.indexOf(".gif") != -1)
        ) {
          obj.type = "img";
          k = k.replace(/&nbsp;/g, "");
          obj.content = k;
          obj.width = img[imgNum].width;
          obj.height = img[imgNum].height;
          obj.label = img[imgNum].label;
        } else if (k != "") {
          obj.type = "text";
          k = k.replace(/&nbsp;/g, "");
          obj.content = k;
        }
        if (!$.isEmptyObject(obj)) {
          ary.push(obj);
        }
      });
      return ary;
    },
    close() {
      this.$store.dispatch("setReportIsShow", false);
    }
  },
  computed: {
    title() {
      // this.$refs.oneStep.taskSelection.name
      return this.$refs.twoStep.title.name;
    },
    sendUser() {
      return this.$refs.twoStep.title.region;
    },
    date() {
      return this.$refs.twoStep.title.date;
    },
    oneText() {
      let text = this.wordProcessing(this.$refs.twoStep.one[0]);
      return text;
    },
    oneImg() {
      return this.$refs.twoStep.one[1];
    },
    twoText() {
      let text = this.wordProcessing(this.$refs.twoStep.two[0]);
      return text;
    },
    twoImg() {
      return this.$refs.twoStep.two[1];
    },
    // threeText() {
    //   let text = this.wordProcessing(this.$refs.twoStep.three[0]);
    //   return text;
    // },
    // threeImg() {
    //   return this.$refs.twoStep.three[1];
    // },
    // fourText() {
    //   let text = this.wordProcessing(this.$refs.twoStep.four[0]);
    //   return text;
    // },
    // fourImg() {
    //   return this.$refs.twoStep.four[1];
    // },
    // fiveText() {
    //   let text = this.wordProcessing(this.$refs.twoStep.five[0]);
    //   return text;
    // },
    // fiveImg() {
    //   return this.$refs.twoStep.five[1];
    // },
    expertGroup() {
      return this.$refs.threeStep.expertGroup;
    }
  }
};
</script>

<style lang="scss">
.researchReport {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  background-size: 100% 100%;
  text-align: center;

  .researchCon {
    background-image: url("/images/yanpan/bg.png");
    background-size: 100% 100%;
    width: 40%;
    height: 50%;
    box-sizing: border-box;
    position: relative;
    top: 25%;
    left: 30%;
    text-align: -webkit-auto;

    .reportTitle {
      height: 35px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      background-image: url("/images/line.png");
      background-size: 110% 100%;
    }
    .reportTitle > span {
      position: relative;
      left: 25px;
      top: 5px;
      color: #ffffff;
    }
    .reportTitle > img {
      position: relative;
      left: 675px;
      top: 10px;
    }
  }

  .reportButton {
    left: 36%;
    width: 63%;
    position: relative;
    top: 19%;
  }

  .btn_style_class {
    position: relative;
    text-align: center;
    display: inline;
    top: 28px;

    span {
      display: inline-block;
      width: 100px;
      height: 27px;
      line-height: 27px;
      text-align: center;
      color: #577ba0;
      font-size: 12px;
      cursor: pointer;
      background: rgba(3, 14, 21, 1);
      border: 1px solid rgba(76, 109, 141, 1);
    }
  }

  .return_btn_position {
    right: 24px;
  }

  .next_btn_position {
    right: 11px;
  }

  .save_btn_position {
    right: 21px;
  }

  .send_btn_position {
    right: 14px;
  }

  .dis_btn_position {
    right: 7px;
  }
}
</style>